<template>
  <view class="flex flex-column">
    <!-- 头部 -->
    <yHeader
      :current="7"
      :screenWidth="screenWidth"
      @Tabs="handleTabs"
    ></yHeader>
    <!-- PC端 -->
    <view v-if="screenWidth > 480" class="py-4 bg-grey" style="height: 100%">
      <view class="__inner flex">
        <view class="pb-4 flex flex-column w-100" style="height: 1030rpx">
          <!-- 标题 -->
          <view
            class="flex bg-white align-center border-bottom border-grey"
            style="box-sizing: border-box; height: 10%"
          >
            <text
              class="font-lg ml-4 font-weight-bold pl-2 border-left"
              :class="'border-' + ThemeColors"
              style="border-left-width: 8rpx"
              >网站设计机构推荐</text
            >
          </view>
          <!-- 内容 -->
          <view class="content bg-white mt-4">
            <el-table
              :data="tableData"
              style="width: 100%"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column width="50">
                <template v-slot="{ row, $index }">
                  <span>{{ $index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="Other_Service_Detail_Name"
                label="机构名称"
                width="180"
              >
                <template v-slot="{ row }">
                  <text class="hover" @click="Outside_the_chain(row)">{{
                    row.Other_Service_Detail_Name
                  }}</text>
                </template>
              </el-table-column>
              <el-table-column
                prop="Other_Service_Detail_Address"
                label="机构总部"
                width="180"
              >
                <template v-slot="{ row }">
                  <text class="hover" @click="Outside_the_chain(row)">{{
                    row.Other_Service_Detail_Address
                  }}</text>
                </template>
              </el-table-column>
              <el-table-column prop="Other_Service_Detail_URL" label="网址">
                <template v-slot="{ row }">
                  <text class="hover" @click="Outside_the_chain(row)">{{
                    row.Other_Service_Detail_URL
                  }}</text>
                </template>
              </el-table-column>
              <el-table-column
                prop="Other_Service_Detail_Phone_Original"
                label="电话"
              >
                <template v-slot="{ row }">
                  <text class="hover" @click="Outside_the_chain(row)"
                    >{{ row.Other_Service_Detail_Phone_Original }}
                  </text>
                </template>
              </el-table-column>
              <el-table-column prop="Other_Service" label="检测服务">
                <template v-slot="{ row }">
                  <text class="hover" @click="Outside_the_chain(row)"
                    >{{ row.Other_Service }}
                  </text>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="">
                <template v-slot="{ row }">
                  <text class="hover" @click="Outside_the_chain(row)">
                    点击跳转
                  </text>
                </template>
              </el-table-column>
              <el-table-column label="">
                <template v-slot="{ row }">
                  <text @click="handleServer(true)">联系客服</text>
                </template>
              </el-table-column>
            </el-table>
            <view class="foot mt-2">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="form.page"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="form.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="limit"
              >
              </el-pagination>
            </view>
          </view>
        </view>
      </view>
      <!-- 联系客服 -->
      <view
        v-if="isServer"
        class="flex flex-column serve-mask bg-white shadow border position-relative"
        :class="'border-' + ThemeColors"
      >
        <view
          class="flex-shrink shadow flex align-center border-bottom border-grey"
          style="height: 80rpx"
        >
          <text
            class="px-2 font font-weight-bold border-left"
            :class="'border-' + ThemeColors"
            style="border-left-width: 8rpx"
            >联系客服</text
          >
          <text
            @click="handleServer(false)"
            class="font-sm text-muted"
            style="cursor: pointer; position: absolute; right: 20rpx"
            >关闭</text
          >
        </view>
        <view class="flex flex-column mb-4" style="height: 100%">
          <view class="w-100" style="height: 100%">
            <scroll-view
              :scroll-top="scrollTop"
              :scroll-with-animation="true"
              :scroll-y="true"
              id="msglistview"
              class="scroll-view"
              style="height: 100%; overflow-y: scroll"
            >
              <view class="chat-body">
                <view v-for="(item_, index) in msgList" :key="index">
                  <view
                    class="item self flex align-center justify-end"
                    v-if="item_.userContent != ''"
                  >
                    <view class="text-center">
                      <text class="font-small">{{ item_.time }}</text>
                      <view class="content right">{{ item_.userContent }}</view>
                    </view>
                    <view class="flex flex-column align-center">
                      <image
                        mode="widthFix"
                        style="width: 70rpx"
                        class="avatar"
                        src="../../static/icon/1.png"
                      >
                      </image>
                    </view>
                  </view>
                  <view class="item Ai" v-if="item_.botContent != ''">
                    <view class="flex flex-column align-center">
                      <image
                        mode="widthFix"
                        style="width: 70rpx"
                        class="avatar"
                        src="../../static/icon/1.png"
                      >
                      </image>
                    </view>
                    <view class="flex flex-column align-center ml-3">
                      <text class="font-small">{{ item_.time }}</text>
                      <view class="content left">
                        {{ item_.botContent }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
        <view
          class="shadow flex-shrink flex align-center bg-lightbrown w-100 border-top border-grey"
          style="height: 90rpx; position: absolute; bottom: -90rpx"
        >
          <textarea
            v-model="chatMsg"
            class="px-2 py-1 w-100"
            style="height: 100%"
            placeholder-class="font text-hover-light"
            placeholder="请输入您要说的话"
          ></textarea>
          <view
            @click="handleSend()"
            class="hover mr-2 flex-shrink rounded-lg flex align-center justify-center"
            :class="'bg-' + ThemeColors"
            style="width: 100rpx; height: 80%"
          >
            <text class="font text-white">发送</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 手机部分 -->
    <view
      v-else-if="screenWidth <= 480"
      class="py-4 bg-grey"
      style="height: 100%"
    >
      <view class="mx-2 bg-white flex mb-4">
        <view class="pb-4 flex flex-column w-100">
          <!-- 标题 -->
          <view
            class="flex align-center border-bottom border-grey"
            style="box-sizing: border-box"
          >
            <text
              class="font-lg font-weight-bold pl-2 py-1 border-left"
              :class="'border-' + ThemeColors"
              style="border-left-width: 8rpx"
              >订单融资</text
            >
          </view>
          <!-- 内容 -->
          <view class="flex align-center w-100">
            <view
              @click="handleSkip('/pages/finance/order-financing')"
              class="flex flex-column w-100"
              style="cursor: pointer; box-sizing: border-box"
            >
              <view
                class="flex-shrink flex justify-center w-100 my-2"
                style="height: 200rpx"
              >
                <image
                  class="rounded-circle"
                  style="width: 200rpx; height: 200rpx"
                  src="../../static/icon/order-financing.png"
                  mode=""
                ></image>
              </view>
              <view class="w-100 flex flex-column align-center">
                <view class="">
                  <text class="font font-weight-bold">介绍说明</text>
                </view>
                <view style="width: 95%">
                  <text class="font-sm"
                    >企业凭借其购销合同和有生产能力、能提供有效担保的订单，向银行提出贷款申请。银行则根据企业的订单及合同，向企业提供贷款。企业在收到货款后，会立即偿还贷款。</text
                  >
                </view>
              </view>
              <view class="mt-2 w-100 flex flex-column align-center">
                <view
                  class="flex align-center"
                  style="height: 20%; box-sizing: border-box"
                >
                  <text class="font font-weight-bold">最新消息</text>
                </view>
                <view style="width: 95%">
                  <view
                    v-for="i in 5"
                    :key="i"
                    class="flex align-center w-100"
                    style="height: 50rpx"
                  >
                    <view
                      class="line flex-shrink"
                      :class="'bg-' + ThemeColors"
                    ></view>
                    <text class="font-sm text-ellipsis" style="width: 720rpx"
                      >西货郎企业与20分钟前办理仓单质押服务</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="mx-2 bg-white flex mb-4">
        <view class="pb-4 flex flex-column w-100">
          <!-- 标题 -->
          <view
            class="flex align-center border-bottom border-grey"
            style="box-sizing: border-box"
          >
            <text
              class="font-lg font-weight-bold pl-2 py-1 border-left"
              :class="'border-' + ThemeColors"
              style="border-left-width: 8rpx"
              >仓单质押</text
            >
          </view>
          <!-- 内容 -->
          <view class="flex align-center w-100">
            <view
              @click="handleSkip('/pages/finance/order-financing')"
              class="flex flex-column w-100"
              style="cursor: pointer; box-sizing: border-box"
            >
              <view
                class="flex-shrink flex justify-center w-100 my-2"
                style="height: 200rpx"
              >
                <image
                  class="rounded-circle"
                  style="width: 200rpx; height: 200rpx"
                  src="../../static/icon/warehouse-pledge.png"
                  mode=""
                ></image>
              </view>
              <view class="w-100 flex flex-column align-center">
                <view class="">
                  <text class="font font-weight-bold">介绍说明</text>
                </view>
                <view style="width: 95%">
                  <text class="font-sm"
                    >作为一种新型的服务项目，在传统仓储企业向现代物流企业转型的过程中得到广泛应用。增值服务仓单质押在国外已经成为企业与银行融通资金的重要手段，也是仓储业增值服务的重要组成部分。</text
                  >
                </view>
              </view>
              <view class="mt-2 w-100 flex flex-column align-center">
                <view
                  class="flex align-center"
                  style="height: 20%; box-sizing: border-box"
                >
                  <text class="font font-weight-bold">最新消息</text>
                </view>
                <view style="width: 95%">
                  <view
                    v-for="i in 5"
                    :key="i"
                    class="flex align-center w-100"
                    style="height: 50rpx"
                  >
                    <view
                      class="line flex-shrink"
                      :class="'bg-' + ThemeColors"
                    ></view>
                    <text class="font-sm text-ellipsis" style="width: 720rpx"
                      >西货郎企业与20分钟前办理仓单质押服务</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="mx-2 bg-white flex">
        <view class="pb-4 flex flex-column w-100">
          <!-- 标题 -->
          <view
            class="flex align-center border-bottom border-grey"
            style="box-sizing: border-box"
          >
            <text
              class="font-lg font-weight-bold pl-2 py-1 border-left"
              :class="'border-' + ThemeColors"
              style="border-left-width: 8rpx"
              >保付代理</text
            >
          </view>
          <!-- 内容 -->
          <view class="flex align-center w-100">
            <view
              @click="handleSkip('/pages/finance/order-financing')"
              class="flex flex-column w-100"
              style="cursor: pointer; box-sizing: border-box"
            >
              <view
                class="flex-shrink flex justify-center w-100 my-2"
                style="height: 200rpx"
              >
                <image
                  class="rounded-circle"
                  style="width: 200rpx; height: 200rpx"
                  src="../../static/icon/factoring.png"
                  mode=""
                ></image>
              </view>
              <view class="w-100 flex flex-column align-center">
                <view class="">
                  <text class="font font-weight-bold">介绍说明</text>
                </view>
                <view style="width: 95%">
                  <text class="font-sm"
                    >这种方式涉及到一个企业（卖方）将其现在或未来的基于其与另一个企业（买方）订立的货物销售/服务合同所产生的应收账款转让给保理商。</text
                  >
                </view>
              </view>
              <view class="mt-2 w-100 flex flex-column align-center">
                <view
                  class="flex align-center"
                  style="height: 20%; box-sizing: border-box"
                >
                  <text class="font font-weight-bold">最新消息</text>
                </view>
                <view style="width: 95%">
                  <view
                    v-for="i in 5"
                    :key="i"
                    class="flex align-center w-100"
                    style="height: 50rpx"
                  >
                    <view
                      class="line flex-shrink"
                      :class="'bg-' + ThemeColors"
                    ></view>
                    <text class="font-sm text-ellipsis" style="width: 720rpx"
                      >西货郎企业与20分钟前办理仓单质押服务</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <yFooter Show :screenWidth="screenWidth"></yFooter>
  </view>
</template>

<script>
const app = getApp();
import yHeader from "@/components/yHeader.vue";
import yFooter from "@/components/yFooter.vue";
import { Message } from "element-ui";
import times from "@/static/js/utils.js";
import { GroupProcureID, GroupServesHistory } from "@/api/group.js";
import { getTableInquiryAction } from "@/api/global.js";
export default {
  components: {
    yHeader,
    yFooter,
  },
  data() {
    return {
      tableData: [],
      screenWidth: uni.getSystemInfoSync().windowWidth,
      screenHigth: uni.getSystemInfoSync().windowHeight,
      ThemeColors: app.globalData.ThemeColors,
      form: {
        page: 1,
        limit: 1,
      },
      limit: 0,
      Testing_services_list: [],
      isServer: false,
      scrollTop: 0,
      msgList: [],
      chatMsg: "",
      form: {
        Data: "other_service_detail",
        page: 1,
        limit: 5,
        Primary_Key: "3",
        Primary_Key_Name: "Other_Service_Type",
      },
    };
  },

  methods: {
    //获取列表
    async getList(data) {
      const res = await getTableInquiryAction({ data });
      console.log(res);
      this.tableData = res.tableData;
      this.limit = Number(res.limit);
    },

    //获取消息历史记录
    async getHistoryList(data) {
      const res = await GroupServesHistory({
        data,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.removeStorageSync("loginInfo");
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else if (res.Status == "success") {
        this.msgList = res.Data;
        this.ScrollBottom();
      }
    },
    //发送的消息添加到消息记录
    async MessagesFileAdd(data) {
      const res = await GoodsFileAdd({
        data,
      });
      if (res.redirect && res.redirect == "REDIRECT") {
        uni.removeStorageSync("loginInfo");
        uni.navigateTo({
          url: "/pages/login/login",
        });
      } else if (res.Status == "success") {
        console.log(res);
      }
    },
    //websocket
    connectSocketInit() {
      // 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
      this.socketTask = uni.connectSocket({
        url:
          app.globalData.Domain_Socket +
          "/websocket?userId=Group" +
          this.usePhone,
        success(data) {
          console.log("websocket连接成功");
        },
      });
      // // 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
      this.socketTask.onOpen((res) => {
        console.log("WebSocket连接正常打开中...！");
        this.is_open_socket = true;
        // 注：只有连接正常打开中 ，才能正常成功发送消息
        this.hearBeatInterval = setInterval(() => {
          this.socketTask.send({
            data: "ping",
          });
        }, 5000);
        // 注：只有连接正常打开中 ，才能正常收到消息
        this.socketTask.onMessage((res) => {
          let time = JSON.parse(res.data).data.time;
          let message = JSON.parse(res.data).data.message;
          this.msgList.push({
            botContent: message,
            userContent: "",
            time,
          });
        });
      });
      // // 这里仅是事件监听【如果socket关闭了会执行】
      this.socketTask.onClose(() => {
        this.is_open_socket = false;
        clearInterval(this.hearBeatInterval);
        console.log("已经被关闭了");
      });
    },
    //发送消息
    handleSend() {
      //如果消息不为空
      this.ScrollBottom();
      if (!this.chatMsg || !/^\s+$/.test(this.chatMsg)) {
        let time = times.nowtime();
        let obj = {
          botContent: "",
          userContent: this.chatMsg,
          time: times.nowtime(),
        };
        this.msgList.push(obj);
        if (this.is_open_socket && this.chatMsg != "") {
          this.socketTask.send({
            data: JSON.stringify({
              time,
              message: this.chatMsg,
              userId: this.Enterprise_Info_SerialNumber,
            }),
            async success() {
              console.log("消息发送成功");
            },
          });
          // this.setMessage(this.usePhone, this.chatMsg, time);
        }
        this.chatMsg = "";
      } else {
        uni.showToast({
          title: "不能发空消息哦",
          icon: "error",
        });
      }
    },
    //滚动到消息底部
    ScrollBottom(i = 0) {
      // this.scrollTop = (124-48)*i
      this.$nextTick(() => {
        this.scrollTop = 10000 + i * 10;
      });
    },
    handleServer(boolen) {
      this.isServer = boolen;
      if (boolen) {
        this.connectSocketInit();
        let data = {
          Group_ID: uni.getStorageSync("loginInfo").use,
          User_Type: "custom",
          Enterprise_Info_SerialNumber: this.form.Enterprise_Info_SerialNumber,
        };
        this.getHistoryList(data);
      } else {
        this.socketTask.onClose(() => {
          this.is_open_socket = false;
          clearInterval(this.hearBeatInterval);
          console.log("已经被关闭了");
        });
      }
    },
    //外链
    Outside_the_chain(row) {
      window.location.href = row.Other_Service_Detail_URL;
    },

    // Testing_services_methods() {
    //   uni.request({
    //     url: app.globalData.Dom + "/Designservices.json",
    //     method: "GET",
    //     success: (res) => {
    //       // console.log(res.data);
    //       // 处理请求成功后的逻辑
    //       this.Testing_services_list = res.data; // 获取请求返回的数据
    //       // this.limit = parseInt(res.data.length);
    //     },
    //     fail: (err) => {
    //       // 处理请求失败后的逻辑
    //       console.error(err);
    //     },
    //   });
    // },

    handleSizeChange(val) {
      this.form.page = 1;
      this.form.limit = val;
      this.getList(this.form);
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },

    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
    handleSkip(url) {
      uni.navigateTo({
        url,
      });
    },
  },
  onLoad() {
    this.getList(this.form);
  },
};
</script>

<style scoped lang="scss">
.hover {
  cursor: pointer;
}
.hover:hover {
  color: #28a745;
  text-decoration: underline;
}
.title {
  display: inline-block;
}
.Other {
  justify-content: space-evenly;
}
.line {
  height: 8rpx;
  width: 8rpx;
  margin-right: 11px;
}
.gun {
  animation: myscroll 5s linear infinite;
}
@keyframes myscroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-250rpx);
  }
}
.content {
  flex: 1;
  .foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
.serve-mask {
  position: fixed;
  right: 0;
  bottom: 90rpx;
  z-index: 1030;
  width: 800rpx;
  height: 40%;
}
</style>
